<template>
  <div id="test2">
    <el-button type="primary" size="mini" @click="add">新增</el-button>
    <el-button type="primary" size="mini" @click="modify('1')">修改1</el-button>
    <el-button type="primary" size="mini" @click="modify('2')">修改2</el-button>
    <el-button type="primary" size="mini" @click="modify('3')">修改3</el-button>
    <cs-dialog :title="title === 'add' ? '新增' : '修改'" :dialogVisible="dialogVisible" @reset="reset('ruleForm')" @close="close('ruleForm')" @sure="sure('ruleForm')">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域" popper-class="zIndex-popper">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-time-select
                popper-class="zIndex-popper"
                placeholder="起始时间"
                v-model="ruleForm.startTime"
                :picker-options="{
                start: '01:00',
                step: '01:00',
                end: '24:00'
              }">
              </el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-time-select
                popper-class="zIndex-popper"
                placeholder="结束时间"
                v-model="ruleForm.endTime"
                :picker-options="{
                start: '01:00',
                step: '01:00',
                end: '24:00',
                minTime: ruleForm.startTime
              }">
              </el-time-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </cs-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import csDialog from './comm/csDialog'

  export default {
    name: 'test2',
    components: {
      csDialog
    },
    data () {
      return {
        ruleForm: {
          name: '',
          region: '',
          startTime: '',
          endTime: '',
          title: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          startTime: [
            { required: true, message: '请选择开始时间', trigger: 'change' }
          ],
          endTime: [
            { required: true, message: '请选择结束时间', trigger: 'change' }
          ]
        },
        dialogVisible: false,
        title: '',
        data: ''
      }
    },
    methods: {
      modify (str) {
        if (str === '1') {
          this.data = '{"name":"zhangsanfeng","region":"shanghai","startTime":"01:00","endTime":"04:00"}'
        } else if (str === '2') {
          this.data = '{"name":"zhangwuji","region":"shanghai","startTime":"05:00","endTime":"09:00"}'
        } else {
          this.data = '{"name":"zhaomin","region":"shanghai","startTime":"08:00","endTime":"20:00"}'
        }
        this.dialogVisible = true
        this.ruleForm = JSON.parse(this.data)
        this.title = 'modify'
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate()
        })
      },
      add () {
        this.title = 'add'
        this.dialogVisible = true
      },
      reset (formName) {
        if (this.title === 'modify') {
          this.ruleForm = JSON.parse(this.data)
          setTimeout(() => {
            this.$refs.ruleForm.clearValidate()
          })
        } else {
          this.$refs[formName].resetFields()
        }
      },
      close (formName) {
        this.$refs[formName].resetFields()
        this.dialogVisible = false
      },
      sure (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          }
        })
      }
    },
    created () {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>
